<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-date-picker v-model="listQuery.date" type="monthrange" align="right" unlink-panels range-separator="至"
        start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions">
      </el-date-picker>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-top:8px" @click="handleFilter">
        查询
      </el-button> -->
      <excelout></excelout>
    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;" size="mini">

      <el-table-column label="账户编号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.accountNo }}</span>

        </template>
      </el-table-column>
      <el-table-column label="电子账户号" align="center" width="200">
        <template slot-scope="{row}">
          <span >{{ row.zbankAccountNo }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="账户名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.accountName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付金额" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.accountPaymentAmonut }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付后余额" align="center"  width="100">
        <template slot-scope="{row}">
          <span>{{ row.accountAvailableBlance }}</span>
        </template>
      </el-table-column>
 
      <!-- <el-table-column label="备注" align="center">
        <template slot-scope="{row}">
          <span>{{ row.accountRemark }}</span>
        </template>
      </el-table-column> -->
 
      <el-table-column label="收支标志" align="center"  width="80">
        <template slot-scope="{row}">
          <span v-if="row.accountPaymentCategory==1" style="color: #66cccc;">收入</span>
          <span v-if="row.accountPaymentCategory==2" style="color: orangered;">支出</span>
        </template>
      </el-table-column>
    
      <el-table-column label="对方名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.accountOtherCustomerName }}</span>
        </template>
      </el-table-column>
     
      <el-table-column label="交易流水号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.accountTrxNo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付手续金额" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.accountPaymentFeeAmonut }}</span>
        </template>
      </el-table-column>
     
      <el-table-column label="摘要" align="center">
        <template slot-scope="{row}">
          <span>{{ row.memo }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="电子回单" align="center" width="80">
        <template slot-scope="{row}">
          <a :href="row.fileKey" :download="row.fileKey" style="color: #66cccc;">下载</a>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="开户渠道" align="center">
        <template slot-scope="{row}">
          <span>{{ row.openChannel }}</span>
        </template>
      </el-table-column> -->
      
     
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
  import {
    getHaierAccountFlowList,excelOutHaierAccountFlowList
  } from '@/api/finance'
  import excelout from '@/components/excelout/index.vue'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'ReceiveTable',
    components: {
      Pagination,excelout
    },
    directives: {
      waves
    },
    data() {
      return {

        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page:1,
          limit:20
        },
      }
    },
    created() {
      this.getList();
    },
    methods: {
      excelout() {
        this.listLoading = true
        this.listQuery.limit = this.total;
        excelOutHaierAccountFlowList(this.listQuery).then(response => {
          this.listLoading = false
          const filepath = response.data.path
          window.location.href = filepath
        })
      },
      getList() {
        getHaierAccountFlowList(this.listQuery).then(res => {
            if(res.code==200){
              this.list=res.data.list;
              this.total = res.data.total
            }
            
        })
        this.listLoading=false

      }
    }
  }
</script>

<style>
</style>
